<template>
  <view class="container">
    <view class="avatar">
      <image src="/static/images/avatar.png"></image>
    </view>

    <view class="form">
      <uv-form
        labelPosition="left"
        labelWidth="80"
        labelAlign="right"
        :model="business"
        :rules="rules"
        ref="FormRef"
      >
        <!-- 表单元素 -->
        <uv-form-item label="手机号码" prop="mobile" borderBottom>
          <uv-input
            v-model="business.mobile"
            border="none"
            placeholder="请输入手机号码"
          ></uv-input>
        </uv-form-item>

        <uv-form-item label="密码" prop="password" borderBottom>
          <uv-input
            type="password"
            v-model="business.password"
            border="none"
            placeholder="请输入密码"
          ></uv-input>
        </uv-form-item>

        <view style="margin-top: 25px">
          <uv-button type="warning" @click="OnSubmit">登录注册</uv-button>
        </view>

        <view class="btn" @click="ToHome">返回首页</view>
      </uv-form>
    </view>
  </view>

  <!-- 消息提示 -->
  <uv-toast ref="NoticeRef"></uv-toast>
</template>

<script setup>
// this代理
const { proxy } = getCurrentInstance();
// 用户数据
const business = reactive({
  mobile: "",
  password: "",
});
// 表单对象实例
const FormRef = ref(null);
const NoticeRef = ref(null);
// 表单验证规则
const rules = ref({
  mobile: [
    {
      type: "string",
      required: true, //要求必填
      message: "手机号码必填",
      trigger: ["change", "blur"], //触发的事件动作
    },
    {
      //自定义验证函数
      validator: (rule, value, callback) => uni.$uv.test.mobile(value),
      message: "手机号码格式有误，请重新填写",
      trigger: ["change", "blur"], //触发的事件动作
    },
  ],
  password: [
    {
      type: "string",
      required: true,
      message: "请填写密码",
      trigger: ["blur", "change"],
    },
  ],
});

// 跳转到首页
const ToHome = () => {
  proxy.$uv.route({
    type: "switchTab",
    url: "/pages/validate/validate",
  });
};

// 提交，登录/注册
const OnSubmit = () => {
  FormRef.value
    .validate()
    .then(async () => {
      // H5端和App端登录 发起请求
      const result = await uni.$uv.http.post("/business/login", business);
      // 处理请求结果
      if (result.code === 1) {
        NoticeRef.value.show({
          type: "success",
          message: result.msg,
          complete: () => {
            // 存储登录信息
            uni.setStorageSync("business", result.data);
            // 赋值给本地存储
            proxy.$business.value = result.data;
            // 跳转到已经登录页
            uni.$uv.route({
              type: "redirectTo",
              url: result.url,
            });
          },
        });
      } else {
        NoticeRef.value.show({
          type: "error",
          message: result.msg,
        });
      }
    })
    .catch(() => {});
};
</script>

<style>
page {
  background-color: #f8fafe;
}

.container .avatar {
  text-align: center;
  background-color: #fff;
}

.avatar image {
  width: 120px;
  height: 120px;
  margin: 50px 0;
  border-radius: 50%;
}

.form {
  margin: 0 50rpx;
  box-sizing: border-box;
}

.btn {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.u-icon {
  margin-left: 10px;
}
</style>